<template>
  <CommonPanel title="设备运维情况" :loading="loading">
    <div class="content-box1 flex-y">
      <div class="content-box1_top flex-1">
        <div class="monitor">
          <div class="monitor_item" v-for="i in monitor" :key="i.label">
            <div class="monitor_item_left">
              <img :src="i.icon" alt="" />
              <div class="text-box">
                <div>{{ i.value }}</div>
                <div>{{ i.label }}</div>
              </div>
            </div>
            <div class="monitor_item_right">
              <div class="right_text">
                <div>在线</div>
                <div>{{ i.lineInfo.line }}</div>
                <div>
                  {{
                    Math.round((i.lineInfo.line / i.lineInfo.counts) * 10000) /
                    100.0 +
                    "%"
                  }}
                </div>
              </div>
              <div class="right_text">
                <div>离线</div>
                <div>{{ i.lineInfo.offline }}</div>
                <div>
                  {{
                    Math.round(
                      (i.lineInfo.offline / i.lineInfo.counts) * 10000
                    ) /
                    100.0 +
                    "%"
                  }}
                </div>
              </div>
              <div class="right_text">
                <div>未检测</div>
                <div>{{ i.lineInfo.not_detected }}</div>
                <div>
                  {{
                    Math.round(
                      (i.lineInfo.not_detected / i.lineInfo.counts) * 10000
                    ) /
                    100.0 +
                    "%"
                  }}
                </div>
              </div>
              <!-- <div v-for="j in i.lineInfo" class="right_text" :key="j.name">
                <div>{{ j.name }}</div>
                <div>{{ j.value }}</div>
                <div>
                  {{ Math.round((j.value / i.value) * 10000) / 100.0 + "%" }}
                </div>
              </div> -->
            </div>
          </div>
        </div>
        <div class="info-panel">
          <div class="info-panel__body">
            <CommonTitle title="视频质量诊断统计" />
            <div class="info-panel__body_content-box">
              <div>
                <CommonChart :option="getCircular(camera_vqd)" />
              </div>
              <div class="value_box">
                <div class="flex">
                  <div class="circle"></div>
                  <div class="text">总数</div>
                  <div class="text">{{ camera_vqd.count }}</div>
                </div>
                <div class="flex">
                  <div class="circle"></div>
                  <div class="text">视频正常</div>
                  <div class="text">{{ camera_vqd.video_normal }}</div>
                </div>
                <div class="flex">
                  <div class="circle"></div>
                  <div class="text">视频异常</div>
                  <div class="text">{{ camera_vqd.video_abnormality }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="info-panel">
          <div class="info-panel__body">
            <CommonTitle title="视频录像诊断统计" />
            <div class="info-panel__body_content-box">
              <div>
                <CommonChart :option="getCircular(camera_record)" />
              </div>
              <div class="value_box">
                <div class="flex">
                  <div class="circle"></div>
                  <div class="text">总数</div>
                  <div class="text">{{ camera_record.count }}</div>
                </div>
                <div class="flex">
                  <div class="circle"></div>
                  <div class="text">视频正常</div>
                  <div class="text">{{ camera_record.video_normal }}</div>
                </div>
                <div class="flex">
                  <div class="circle"></div>
                  <div class="text">视频异常</div>
                  <div class="text">{{ camera_record.video_abnormality }}</div>
                </div>
                <div class="flex">
                  <div class="circle"></div>
                  <div class="text">未配置</div>
                  <div class="text">{{ camera_record.video_not_pz }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content-box1_bottom flex-1">
        <div v-for="i in list" :key="i.name">
          <div class="chart_box">
            <CommonChart :option="getCircle(i.monitor_num)" />
          </div>
          <div class="label_box">{{ i.name }}</div>
          <div class="value_box">
            <div class="flex">
              <div class="circle"></div>
              <div class="text">在线</div>
              <div class="text">{{ i.monitor_num.line }}</div>
              <div class="text">
                {{
                  Math.round(
                    (i.monitor_num.line / (i.monitor_num.line + i.monitor_num.not_detected + i.monitor_num.offline)) * 100
                  ) + "%"
                }}
              </div>
            </div>
            <div class="flex">
              <div class="circle"></div>
              <div class="text">离线</div>
              <div class="text">{{ i.monitor_num.offline }}</div>
              <div class="text">
                {{
                  Math.round(
                    (i.monitor_num.offline / (i.monitor_num.line + i.monitor_num.not_detected + i.monitor_num.offline)) * 100
                  ) + "%"
                }}
              </div>
            </div>
            <div class="flex">
              <div class="circle"></div>
              <div class="text">未检测</div>
              <div class="text">{{ i.monitor_num.not_detected }}</div>
              <div class="text">
                {{
                  Math.round((i.monitor_num.not_detected /
                    (i.monitor_num.line + i.monitor_num.not_detected + i.monitor_num.offline)) * 100) + "%"
                }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </CommonPanel>
</template>

<script setup>
import * as echarts from "echarts";
import icon_01 from "@/assets/icon-image/icon_top_01@2x.png";
import icon_02 from "@/assets/icon-image/icon_top_02@2x.png";
import icon_03 from "@/assets/icon-image/icon_top_03@2x.png";
import icon_04 from "@/assets/icon-image/icon_top_04@2x.png";
import { computed, onMounted, reactive, ref, watch } from "vue";
const myChartRef = ref(null);
const myChart = ref(null);
const num = ref(0);
onMounted(() => {
  if (myChartRef.value) {
    myChart = echarts.init(myChartRef.value);
  }
});
let monitor = reactive([
  {
    icon: icon_01,
    label: "视频设备",
    prop: "monitor",
    lineInfo: {
      line: 0,
      offline: 0,
      not_detected: 0,
      counts: 0,
    },
    // lineInfo: [
    //   { name: "在线", value: 2 },
    //   { name: "离线", value: 1 },
    //   { name: "未检测", value: 2 },
    //   { name: "未检测", value: 2 },
    // ],
  },
  {
    icon: icon_02,
    label: "监控点",
    prop: "devices",
    lineInfo: {
      line: 0,
      offline: 0,
      not_detected: 0,
      counts: 0,
    },
  },
]);

let list = reactive([]);
let camera_vqd = reactive({
  count: 0,
  video_abnormality: 0,
  video_normal: 0,
});
let camera_record = reactive({
  count: 0,
  video_normal: 0,
  video_abnormality: 0,
  video_not_pz: 0,
});
const props = defineProps({
  CenterTopData: {
    type: Object,
    default: () => { },
  },
});
watch(
  () => props.CenterTopData,
  (newVal) => {
    monitor.forEach((item) => {
      item.lineInfo = newVal.monitor[item.prop] || {
        line: 0,
        offline: 0,
        not_detected: 0,
        counts: 0,
      };
    });
    camera_vqd = newVal.camera_vqd;
    camera_record = newVal.camera_record;
    list = newVal.camera_type_lists;
  },
  {
    deep: true,
    immediate: true,
  }
);

function numb() {
  num = num + 5;
  myChart.setOption(option, true);
}
// setInterval(function () {
//   numb();
// }, 1000);

function getCircular(data) {
  const nameMap = {
    video_normal: "正常",
    video_abnormality: "异常",
    video_not_pz: "未配置",
    count: "总数",
  };
  let dataList = Object.entries(data).map(([name, value]) => ({
    name: nameMap[name] || name,
    value,
  }));
  return {
    legend: {
      show: false,
      icon: "circle",
      right: "3%",
      left: "center",
      bottom: "10%",
      itemWidth: 10,
      itemStyle: {
        borderColor: "none",
      },
    },
    tooltip: {
      trigger: "item",
    },
    series: [
      {
        type: "pie",
        color: ["#4D88FE", "#50CCCB", "#FFBF3C", "#FF597D"],
        radius: "100%",
        left: "center",
        data: dataList,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
        labelLine: {
          show: false,
        },
        label: {
          width: 0,
          fontSize: 0,
        },
      },
    ],
  };
}
function getCircle(data) {
  let color = ["rgba(255, 89, 119, 1)", "rgba(38, 171, 251, 1)", "rgba(255, 191, 60, 1)"];
  let num = data.counts;
  delete data.counts;
  const nameMap = {
    line: "在线",
    offline: "离线",
    not_detected: "未检测",
  };
  let dataList = Object.entries(data).map(([name, value]) => ({
    name: nameMap[name] || name,
    value,
  }));

  return {
    color: color,
    tooltip: {
      trigger: "item",
    },
    title: {
      text: num,
      top: "48%",
      textAlign: "center",
      left: "49%",
      textStyle: {
        color: "#fff",
        fontSize: 14,
        fontWeight: "400",
        fontFamily: "PingFangSC-Regular",
      },
    },
    series: [
      {
        type: "pie",
        data: dataList,
        center: ["50%", "50%"],
        radius: ["30%", "45%"],
        itemStyle: {
          normal: {
            label: {
              show: false,
              position: "outside",
              color: color.map((item) => {
                return item;
              }),
              padding: [0, -100, 0, -100],
              fontSize: 13,
              formatter: function (params) {
                if (params.name !== "") {
                  return (
                    "{name|" +
                    params.name +
                    "}\n{cir" +
                    params.dataIndex +
                    "|●}\n{percent|" +
                    params.value +
                    "}"
                  );
                } else {
                  return "";
                }
              },
              rich: {
                name: {
                  color: "rgba(0, 0, 0, 1)",
                  fontSize: 14,
                  align: "center",
                  fontFamily: "PingFangSC-Regular",
                },
                percent: {
                  fontFamily: "DIN",
                  fontWeight: 500,
                  fontSize: 20,
                  color: "rgba(37, 168, 250, 1)",
                  align: "center",
                },
                cir0: {
                  fontSize: 15,
                  opacity: 1,
                  color: "rgba(255, 89, 119, 1)",
                  padding: [10, 92, 0, 92],
                },
                cir1: {
                  fontSize: 15,
                  opacity: 1,
                  color: "rgba(38, 171, 251, 1)",
                  padding: [10, 92, 0, 92],
                },
              },
            },
            labelLine: {
              length: 27,
              length2: 70,
              show: true,
              color: "#00ffff",
            },
          },
        },
        name: "",
        hoverAnimation: false,
      },
    ],
  };
}
const option = computed(() => {
  return {
    title: [
      {
        text: "处置率",
        x: "center",
        top: "54%",
        textStyle: {
          color: "#9BA3AE",
          fontSize: 15,
          fontWeight: "100",
        },
      },
      {
        text: "60%",
        x: "center",
        top: "35%",
        textStyle: {
          fontSize: "20",
          color: "#FCE598",
          fontFamily: "Lato",
          foontWeight: "600",
        },
      },
    ],
    polar: {
      radius: ["74%", "80%"],
      center: ["50%", "50%"],
    },
    angleAxis: {
      max: 100,
      show: false,
    },
    radiusAxis: {
      type: "category",
      show: true,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        name: "",
        type: "bar",
        roundCap: true,
        barWidth: 60,
        showBackground: true,
        backgroundStyle: {
          color: "rgba(66, 66, 66, .3)",
        },
        data: [60],
        coordinateSystem: "polar",

        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: "#F9C65A",
              },
              {
                offset: 1,
                color: "#815326",
              },
            ]),
          },
        },
      },
    ],
  };
});

onMounted(() => { });
</script>

<style lang="scss" scoped>
.content-box1 {
  height: 100%;
  box-sizing: border-box;
  padding: 16px 6px;

  &_top {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 10px;

    .top-box {
      height: 20px;
      width: 100%;
      text-align: center;
      line-height: 20px;
      font-size: 16px;
      color: #9ba3ae;

      span {
        font-weight: 600;
        font-size: 20px;
        color: #65e3f8;
      }
    }

    .monitor {
      display: grid;
      grid-template-rows: 1fr 1fr;
      grid-column-gap: 5px;
      grid-row-gap: 10px;

      &_item {
        padding: 0 0 0 20px;
        height: 110px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        color: #fff;
        background: url("../../../assets/image/monitor_bg.png") no-repeat center 0px;

        &>div {
          display: flex;
          align-items: center;
        }

        &_left {
          img {
            height: 100px;
          }

          .text-box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-left: 10px;

            &>div:first-child {
              font-size: 24px;
              font-weight: 600;
              padding-bottom: 10px;
            }

            &>div:last-child {
              font-size: 16px;
            }
          }
        }

        &_right {
          display: grid !important;
          grid-template-rows: 1fr 1fr 1fr;

          &>div:nth-child(odd) {
            background-image: linear-gradient(270deg,
                rgba(90, 150, 255, 0.15) 0%,
                rgba(109, 190, 255, 0) 97%);
          }

          &>div {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
          }

          .right_text {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
          }
        }
      }
    }
  }

  &_bottom {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-column-gap: 10px;
    color: #fff;

    .chart_box {
      height: 45%;
    }

    .label_box {
      height: 8%;
      color: #ccc;
      padding: 5px 0;
      text-align: center;
    }

    .value_box {
      height: 45%;

      &>div {
        margin-bottom: 10px;
        background-image: linear-gradient(164deg,
            rgba(10, 71, 102, 0.65) 0%,
            rgba(26, 48, 64, 0.3) 100%);
        border-radius: 30px;
        box-sizing: border-box;
        box-shadow: 1px 1px 1px #999 inset;
        padding: 5px 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .circle {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          border: 3px solid red;
          margin-right: 10px;
        }

        .text {
          flex: 1;
        }
      }
    }
  }
}

.info-panel {
  position: relative;
  border: 1px solid rgba(82, 209, 255, 0.25);
  background:
    // left top
    linear-gradient(to right, #50d1ff, #50d1ff) no-repeat left top / 8px 2px,
    linear-gradient(to bottom, #50d1ff, #50d1ff) no-repeat left top / 2px 8px,
    // right top
    linear-gradient(to left, #50d1ff, #50d1ff) no-repeat right top / 8px 2px,
    linear-gradient(to bottom, #50d1ff, #50d1ff) no-repeat right top / 2px 8px,
    // left bottom
    linear-gradient(to right, #50d1ff, #50d1ff) no-repeat left bottom / 8px 2px,
    linear-gradient(to top, #50d1ff, #50d1ff) no-repeat left bottom / 2px 8px,
    // right bottom
    linear-gradient(to left, #50d1ff, #50d1ff) no-repeat right bottom / 8px 2px,
    linear-gradient(to top, #50d1ff, #50d1ff) no-repeat right bottom / 2px 8px;

  &__body {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px 14px;
    box-sizing: border-box;
    background-color: rgba(57, 106, 255, 0.12);
    background-clip: content-box;

    .common-title {
      padding: 10px 0;
    }

    &_content-box {
      flex: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-column-gap: 5px;

      .value_box {
        color: #fff;
        padding: 0 10px;
        display: flex;
        flex-direction: column;
        // align-items: center;
        justify-content: space-around;

        &>div {
          margin-bottom: 10px;
          background-image: linear-gradient(164deg,
              rgba(10, 71, 102, 0.65) 0%,
              rgba(26, 48, 64, 0.3) 100%);
          border-radius: 30px;
          box-sizing: border-box;
          box-shadow: 1px 1px 1px #999 inset;
          padding: 5px 15px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .circle {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            border: 3px solid red;
            margin-right: 10px;
          }

          .text {
            flex: 1;
          }
        }
      }

      // flex: 1;
      // height: 0px;
      // margin-top: 14px;
    }
  }
}
</style>
